<template>
  <div class="line-view chart-container">
    <div class="chart-item" v-for="(chart, index) in chartComponents" :key="chart.name" @click="openChartPreview(chart.component)">
      <component :is="chart.component" />
      <h3>{{ index + 1 }}. {{ chart.label || '折线图' }}</h3>
    </div>
  </div>
  <ChartPreview ref="chartPreviewRef" />
</template>

<script setup>
import { ref } from 'vue';
import ChartPreview from '@/components/chartPreview.vue';
import LineChart01 from './components/lineChart01.vue';
import LineChart02 from './components/lineChart02.vue';
import LineChart03 from './components/lineChart03.vue';
import LineChart04 from './components/lineChart04.vue';
import LineChart05 from './components/lineChart05.vue';
import LineChart06 from './components/lineChart06.vue';

const chartComponents = [
  { name: 'LineChart01', component: LineChart01, label: '多数据折线图' },
  { name: 'LineChart02', component: LineChart02, label: '折线图' },
  { name: 'LineChart03', component: LineChart03, label: '折线图' },
  { name: 'LineChart04', component: LineChart04, label: '折线图' },
  { name: 'LineChart05', component: LineChart05, label: '折线图' },
  { name: 'LineChart06', component: LineChart06, label: '柱状&折线图' },
];

const chartPreviewRef = ref(null)

const openChartPreview = (component) => {
  chartPreviewRef.value.open(component)
}
</script>

<style scoped>
</style>
